<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>节气祝福抽签</title>

    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {

            font-family: 'Noto Serif SC', serif;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            background: linear-gradient(to bottom, #f9f3e9, #e8dfca);

            color: #543d2e;

            padding: 20px;

        }

        .container {

            max-width: 800px;

            width: 100%;

            text-align: center;

            background: rgba(255, 249, 237, 0.9);

            border-radius: 15px;

            padding: 30px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

            border: 1px solid #d4a76a;

        }

        .header {

            margin-bottom: 30px;

        }

        h1 {

            font-family: 'Ma Shan Zheng', cursive;

            font-size: 2.8rem;

            color: #8b1a00;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

            margin-bottom: 10px;

            letter-spacing: 5px;

        }

        .subtitle {

            font-size: 1.2rem;

            color: #7d5b43;

            margin-bottom: 20px;

        }

        .divider {

            height: 2px;

            background: linear-gradient(to right, transparent, #d4a76a, transparent);

            margin: 25px 0;

        }

        .content {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 30px;

        }

        .vase-container {

            position: relative;

            width: 300px;

            height: 400px;

            margin: 0 auto;

        }

        .result-container {

            width: 100%;

            max-width: 500px;

            min-height: 180px;

            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23d4a76a" stroke-width="0.5" stroke-dasharray="5,5"/></svg>');

            border-radius: 10px;

            padding: 25px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

            border: 1px solid #d4a76a;

            display: none;

            position: relative;

            overflow: hidden;

        }

        .result-container::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 10px;

            background: linear-gradient(to bottom, #8b1a00, transparent);

            opacity: 0.2;

        }

        .result-container.show {

            display: block;

            animation: fadeIn 0.8s ease-out;

        }

        .blessing {

            font-family: 'Ma Shan Zheng', cursive;

            font-size: 2rem;

            color: #8b1a00;

            margin-bottom: 15px;

            line-height: 1.4;

        }

        .meaning {

            font-size: 1.1rem;

            color: #7d5b43;

            line-height: 1.6;

            text-align: left;

        }

        .draw-btn {

            background: linear-gradient(to bottom, #8b1a00, #6d0000);

            color: #fff8e1;

            border: none;

            padding: 14px 35px;

            font-size: 1.2rem;

            border-radius: 50px;

            cursor: pointer;

            font-family: 'Ma Shan Zheng', cursive;

            letter-spacing: 2px;

            box-shadow: 0 5px 15px rgba(139, 26, 0, 0.3);

            transition: all 0.3s;

            margin-top: 20px;

        }

        .draw-btn:hover {

            transform: translateY(-3px);

            box-shadow: 0 8px 20px rgba(139, 26, 0, 0.4);

        }

        .draw-btn:active {

            transform: translateY(1px);

        }

        .instructions {

            margin-top: 25px;

            font-size: 1rem;

            color: #9e8574;

        }

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(20px); }

            to { opacity: 1; transform: translateY(0); }

        }

        @keyframes shake {

            0% { transform: translateX(0); }

            25% { transform: translateX(-8px); }

            50% { transform: translateX(0); }

            75% { transform: translateX(8px); }

            100% { transform: translateX(0); }

        }

        .shake {

            animation: shake 0.5s;

        }

        .footer {

            margin-top: 40px;

            font-size: 0.9rem;

            color: #9e8574;

        }

        .cloud {

            position: absolute;

            background: rgba(255, 255, 255, 0.7);

            border-radius: 50%;

            box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.7);

        }

        .cloud-1 {

            width: 120px;

            height: 40px;

            top: 20px;

            left: 10%;

        }

        .cloud-2 {

            width: 100px;

            height: 30px;

            top: 40px;

            right: 15%;

        }

        @media (max-width: 600px) {

            h1 { font-size: 2.2rem; }

            .subtitle { font-size: 1rem; }

            .blessing { font-size: 1.7rem; }

            .vase-container { transform: scale(0.9); }

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header">

            <h1>节气祝福抽签</h1>

            <p class="subtitle">点击签筒，抽取您的专属节气祝福</p>

            <div class="divider"></div>

        </div>

       

        <div class="content">

            <div class="vase-container">

                <svg width="300" height="400" viewBox="0 0 300 400">

                    <!-- 背景装饰 -->

                    <defs>

                        <linearGradient id="vaseGradient" x1="0%" y1="0%" x2="0%" y2="100%">

                            <stop offset="0%" stop-color="#8b4513" />

                            <stop offset="100%" stop-color="#6b3100" />

                        </linearGradient>

                        <pattern id="bambooPattern" patternUnits="userSpaceOnUse" width="10" height="10">

                            <line x1="0" y1="0" x2="0" y2="10" stroke="#79553b" stroke-width="1" />

                        </pattern>

                        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

                            <feGaussianBlur in="SourceAlpha" stdDeviation="4" />

                            <feOffset dx="4" dy="4" result="offsetblur"/>

                            <feFlood flood-color="#000000" flood-opacity="0.2"/>

                            <feComposite in2="offsetblur" operator="in"/>

                            <feMerge>

                                <feMergeNode/>

                                <feMergeNode in="SourceGraphic"/>

                            </feMerge>

                        </filter>

                    </defs>

                   

                    <!-- 签筒阴影 -->

                    <ellipse cx="150" cy="380" rx="75" ry="15" fill="#333" opacity="0.3" filter="url(#shadow)"/>

                   

                    <!-- 签筒主体 -->

                    <path d="M100,350 L100,120 C100,100 120,80 150,80 C180,80 200,100 200,120 L200,350 Z" fill="url(#vaseGradient)" filter="url(#shadow)"/>

                    <rect x="100" y="80" width="100" height="270" fill="url(#bambooPattern)" opacity="0.2"/>

                   

                    <!-- 签 -->

                    <g id="sticks">

                        <rect x="110" y="70" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="125" y="65" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="140" y="60" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="155" y="65" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="170" y="70" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="120" y="75" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="135" y="70" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="150" y="65" width="5" height="20" fill="#d4a76a" rx="2" />

                        <rect x="165" y="70" width="5" height="20" fill="#d4a76a" rx="2" />

                    </g>

                   

                    <!-- 点击区域 -->

                    <rect x="90" y="60" width="120" height="300" fill="transparent" cursor="pointer" id="drawButton"/>

                </svg>

            </div>

           

            <div class="result-container" id="result">

                <div class="blessing" id="blessing"></div>

                <div class="meaning" id="meaning"></div>

            </div>

           

            <button class="draw-btn" id="drawBtn">抽取祝福</button>

           

            <p class="instructions">点击上方签筒或按钮，获取您的专属节气祝福签</p>

        </div>

       

        <div class="divider"></div>

       

        <div class="footer">

            <p>二十四节气 · 中国传统智慧 · 万洲同庆</p>

        </div>

    </div>


    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const drawButton = document.getElementById('drawButton');

            const drawBtn = document.getElementById('drawBtn');

            const result = document.getElementById('result');

            const blessing = document.getElementById('blessing');

            const meaning = document.getElementById('meaning');

            const sticks = document.getElementById('sticks');

           

            // 30个节气祝福数据（处暑、秋至、丰收、养生、万洲相关）

            const blessings = [

                {

                    text: "处暑凉风至，白露晨已晞",

                    meaning: "处暑时节凉风起，白露晨间渐消散。愿君养生宜早睡，秋燥之时多饮水，身心安康福自来。"

                },

                {

                    text: "秋风送爽丹桂香，五谷丰登粮满仓",

                    meaning: "秋风吹来丹桂芬芳，五谷丰收粮仓满满。愿您事业如秋收，硕果累累；家庭如满月，团团圆圆。"

                },

                {

                    text: "白露秋分夜，一夜凉一夜",

                    meaning: "白露秋分夜渐寒，一夜更比一夜凉。劝君及时添衣裳，养生防病保健康，安然度秋无烦忧。"

                },

                {

                    text: "金秋时节庆丰收，万洲同乐共此时",

                    meaning: "金色秋季庆丰收，万洲大地共欢腾。愿您收获时节喜事多，事业生活双丰收，幸福安康乐无边。"

                },

                {

                    text: "秋高气爽宜登高，望远抒怀心自宽",

                    meaning: "秋日天高气爽，适宜登高望远。愿您视野开阔，胸怀坦荡，烦恼尽消，吉祥如意伴身旁。"

                },

                {

                    text: "处暑养生食为先，润肺防燥梨膏甜",

                    meaning: "处暑养生饮食为重，润肺防燥梨膏甘甜。愿您秋日注重调养，身心和谐，安康常伴每一天。"

                },

                {

                    text: "秋水共长天一色，丰收与喜悦齐飞",

                    meaning: "秋水与长空一色，丰收共喜悦齐飞。愿您在这个金秋时节，收获满满，快乐无限，幸福长存。"

                },

                {

                    text: "寒露凝霜菊花开，养生进补正当时",

                    meaning: "寒露凝霜菊绽放，养生进补好时机。愿您顺应天时调理身心，增强体质，迎接寒冬的到来。"

                },

                {

                    text: "万洲丰收同庆贺，五谷丰登乐开怀",

                    meaning: "万洲大地共庆丰收，五谷丰登喜笑开怀。愿您的生活如丰收季节，充实而美好，幸福而圆满。"

                },

                {

                    text: "秋风起兮白云飞，草木黄落兮雁南归",

                    meaning: "秋风吹拂白云飘，草木枯黄雁南飞。愿您顺应自然变化，调整身心节奏，安然度过季节交替。"

                },

                {

                    text: "处暑过后夜渐凉，早卧早起精神爽",

                    meaning: "处暑之后夜晚渐凉，早睡早起精神饱满。愿您遵循自然规律，养生保健，活力充沛度金秋。"

                },

                {

                    text: "稻花香里说丰年，听取欢声一片",

                    meaning: "稻花飘香话丰年，耳畔尽是欢笑声。愿您事业如秋收，硕果累累；生活如稻香，芬芳四溢。"

                },

                {

                    text: "秋月明明似镜悬，养生静心最为先",

                    meaning: "秋月明亮如镜悬空，养生之道静心为首。愿您秋日里心境平和，淡泊宁静，健康安乐自在。"

                },

                {

                    text: "万洲同庆丰收节，笑语欢声满人间",

                    meaning: "万洲共庆丰收佳节，欢声笑语充满人间。愿您分享丰收喜悦，传递幸福温暖，安康常伴左右。"

                },

                {

                    text: "秋风扫落叶归根，养生护阳固本真",

                    meaning: "秋风吹落叶归根，养生重在护阳固本。愿您顺应时节保养，增强体质，为寒冬做好准备。"

                },

                {

                    text: "处暑时节宜食鸭，滋阴润燥体康佳",

                    meaning: "处暑时节适宜食鸭，滋阴润燥身体康健。愿您懂得饮食养生，顺应天时，安康快乐度秋季。"

                },

                {

                    text: "秋水长天共一色，丰收喜悦满心间",

                    meaning: "秋水与长天同一色，丰收喜悦充满心田。愿您收获季节心想事成，快乐幸福永相随。"

                },

                {

                    text: "白露为霜蒹葭苍，养生防寒添衣裳",

                    meaning: "白露成霜芦苇苍茫，养生需防寒添衣裳。愿您关注天气变化，及时保暖，远离疾病困扰。"

                },

                {

                    text: "万洲同奏丰收曲，金秋时节庆有余",

                    meaning: "万洲齐奏丰收乐曲，金秋时节庆祝有余。愿您分享丰收喜悦，生活富足，幸福安康长伴。"

                },

                {

                    text: "秋分昼夜均平分，阴阳平衡养生道",

                    meaning: "秋分昼夜平均分，阴阳平衡养生之道。愿您把握节气特点，调和身心，健康安乐自在。"

                },

                {

                    text: "处暑过后宜食酸，收敛肺气保平安",

                    meaning: "处暑之后适宜食酸，收敛肺气保身体平安。愿您懂得秋季饮食之道，养生防病，安康常伴。"

                },

                {

                    text: "丹枫似火映秋阳，丰收喜悦满粮仓",

                    meaning: "枫叶如火映秋阳，丰收喜悦粮仓满。愿您事业生活双丰收，幸福快乐如秋阳温暖。"

                },

                {

                    text: "秋雨绵绵润万物，养生防湿健脾胃",

                    meaning: "秋雨绵绵滋润万物，养生需防湿健脾胃。愿您关注秋季湿气，调理饮食，保持身体健康。"

                },

                {

                    text: "万洲同庆丰收年，笑语欢歌震九天",

                    meaning: "万洲共庆丰收之年，笑语欢声响彻云霄。愿您分享丰收喜悦，传递幸福，安康常伴每一天。"

                },

                {

                    text: "秋风送爽桂飘香，养生运动宜适量",

                    meaning: "秋风送爽桂花香，养生运动要适量。愿您秋季锻炼有度，增强体质，迎接寒冬的到来。"

                },

                {

                    text: "处暑时节防秋燥，梨子蜂蜜润肺好",

                    meaning: "处暑时节防秋燥，梨子蜂蜜润肺佳。愿您懂得秋季养生，食疗保健，身体健康无烦恼。"

                },

                {

                    text: "秋水共长天一色，丰收与福气同来",

                    meaning: "秋水与长空一色，丰收共福气同来。愿您收获季节好运连连，事业生活双圆满。"

                },

                {

                    text: "寒蝉凄切对长亭，养生静心宜安宁",

                    meaning: "秋蝉凄切对长亭，养生静心需安宁。愿您秋日里心境平和，远离烦扰，健康安乐自在。"

                },

                {

                    text: "万洲丰收同欢乐，五谷丰登喜盈门",

                    meaning: "万洲丰收共同欢乐，五谷丰登喜气盈门。愿您的生活如丰收时节，充实美好，幸福圆满。"

                },

                {

                    text: "秋风起兮丰收忙，养生之道在平衡",

                    meaning: "秋风吹起丰收忙，养生之道贵在平衡。愿您工作休息两不误，身心健康，快乐度金秋。"

                }

            ];

           

            // 添加点击事件

            drawButton.addEventListener('click', drawBlessing);

            drawBtn.addEventListener('click', drawBlessing);

           

            function drawBlessing() {

                // 添加摇晃动画

                sticks.classList.add('shake');

               

                // 随机选择一个祝福

                const randomIndex = Math.floor(Math.random() * blessings.length);

                const selectedBlessing = blessings[randomIndex];

               

                // 显示结果

                setTimeout(function() {

                    blessing.textContent = selectedBlessing.text;

                    meaning.textContent = selectedBlessing.meaning;

                    result.classList.add('show');

                   

                    // 移除动画类，以便下次可以再次添加

                    setTimeout(function() {

                        sticks.classList.remove('shake');

                    }, 500);

                }, 500);

            }

        });

    </script>

</body>

</html>